/*!
 * Tencent is pleased to support the open source community by making BK-CI 蓝鲸持续集成平台 available.
 *
 * Copyright (C) 2019 THL A29 Limited, a Tencent company.  All rights reserved.
 *
 * BK-CI 蓝鲸持续集成平台 is licensed under the MIT license.
 *
 * A copy of the MIT License is included in this file.
 *
 *
 * Terms of the MIT License:
 * ---------------------------------------------------
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

@import './../../../scss/conf';

$borderColor: #c6cdd2;
$grey: #c3cdd7;

.pipeline-step {
    position: relative;
    float: left;
    width: 348px;
    &.serial {
        .step-item:not(.create) {
            &:before {
                top: -27px;
                left: -15px;
                height: 43px;
                border-left: 1px dashed $primaryColor;
            }
            &:after {
                top: 16px;
                left: -19px;
                width: 5px;
                height: 5px;
                border: 2px solid $primaryColor;
                border-radius: 50%;
                background-color: #fff;
            }
            // step状态
            &.success {
                &:before {
                    border-left-style: solid;
                }
            }
            &.warning {
                &:before {
                    border-color: $warningColor;
                }
                &:after {
                    border-color: $warningColor;
                }
            }
            &.error {
                &:before {
                    border-color: $failColor;
                }
                &:after {
                    border-color: $failColor;
                }
            }
            &.not_built {
                &:before {
                    border-color: #c3cdd7;
                }
                &:after {
                    border-color: #c3cdd7;
                }
            }
            &.skipped {
                border-color: $borderWeightColor;
                cursor: not-allowed;
                &:before {
                    height: 52px;
                    border-left-style: solid;
                }
                &:after {
                    display: none;
                }
                &:hover {
                    border-color: $borderWeightColor;
                    box-shadow: none;
                    .step-item__title {
                        color: $borderWeightColor;
                    }
                }
                .step-item__title {
                    color: $borderWeightColor;
                }
                .base-left .bk-icon {
                    color: $borderWeightColor;
                }
            }
            // step状态
        }
    }
    &.parallel {
        .step-item:not(.create) {
            &:before {
                top: -32px;
                left: -15px;
                height: 52px;
                width: 11px;
                border: {
                    left: 1px dashed $primaryColor;
                    bottom: 1px dashed $primaryColor;
                }
            }
            &:after {
                top: -25px;
                right: -14px;
                height: 45px;
                width: 11px;
                border: {
                    right: 1px dashed $primaryColor;
                    bottom: 1px dashed $primaryColor;
                }
            }
            .step-item__wrapper {
                &:before,
                &:after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 5px;
                    height: 5px;
                    border: 2px solid $grey;
                    border-radius: 50%;
                    background-color: #fff;
                }
                &:before {
                    left: -5px;
                }
                &:after {
                    right: -5px;
                }
            }
            // step状态
            &.not_built {
                &:before {
                    border-left-color: $grey;
                    border-bottom-color: $grey;
                }
                &:after {
                    border-right-color: $grey;
                    border-bottom-color: $grey;
                }
                .step-item__wrapper {
                    &:before,
                    &:after {
                        border-color: $grey;
                    }
                }
            }
            &.success {
                &:before {
                    border-left-style: solid;
                    border-bottom-style: solid;
                }
                .step-item__wrapper {
                    &:before,
                    &:after {
                        border-color: $primaryColor;
                    }
                }
            }
            &.warning {
                &:before {
                    border-left-color: $warningColor;
                    border-bottom-color: $warningColor;
                }
                &:after {
                    border-bottom-color: $grey;
                }
                .step-item__wrapper {
                    &:before {
                        border-color: $warningColor;
                    }
                }
            }
            &.error {
                &:before {
                    border-left-color: $failColor;
                    border-bottom-color: $failColor;
                }
                &:after {
                    border-bottom-color: $grey;
                }
                .step-item__wrapper {
                    &:before {
                        border-color: $failColor;
                    }
                }
            }
            // step状态
        }
        .step-item:first-child {
            &:before,
            &:after {
                top: -13px;
                height: 33px;
            }
        }
    }
    .step-list {
        position: relative;
    }
    .step-divider-create {
        position: absolute;
        top: -9px;
        left: 54px;
        right: 0;
        width: 240px;
        img {
            position: absolute;
            top: -9px;
            right: 1px;
            cursor: pointer;
        }
    }
    // 状态颜色
    .step-status {
        .status-loading {
            display: block;
            width: 18px;
            height: 18px;
            animation: loading .8s linear infinite;
        }
        .bk-icon {
            display: block;
            margin-right: 0 !important;
            padding: 1px;
            border-radius: 50%;
            color: #fff;
            font-size: 12px;
            &.success {
                color: $primaryColor;
                font-weight: bold;
            }
            &.paused {
                background-color: #ffc349;
            }
            &.error {
                color: $dangerColor;
                border: 1px solid $dangerColor;
            }
        }
    }
    &:not(:first-child) {
        .step-header__content .title:hover {
            cursor: pointer;
            color: $primaryColor;
        }
    }
    // 工作空间覆盖样式
    &.workspace {
        .step-header__content .title:hover {
            cursor: default;
            color: #fff;
        }
        .end-round {
            cursor: default;
        }
        &.parallel {
            .step-item:not(.create) {
                &:before,
                &:after {
                    border-bottom-color: $grey;
                }
            }
        }
        .step-item {
            &.step-item-checked {
                &:before,
                &:after {
                    border-bottom-color: $primaryColor !important;
                }
                .step-item__wrapper {
                    &:before,
                    &:after {
                        border-color: $primaryColor;
                    }
                }
            }
        }
    }
    // 工作空间覆盖样式
    // 执行详情覆盖样式
    &.detail {
        .step-header__content .title:hover {
            cursor: default;
            color: #fff;
        }
        .post-round.end-round {
            color: $grey;
            border-color: $grey;
            box-shadow: none;
            &:before {
                background-color: $grey;
            }
        }
        &.not_built {
            .step-header__number {
                background-color: $grey;
            }
            .step-divider {
                &:before {
                    border-color: $grey;
                }
                .pre-round {
                    color: $grey;
                    &,
                    &:before,
                    &:after {
                        border-color: $grey;
                    }
                    .bk-icon {
                        color: $grey;
                    }
                }
                .main-divider {
                    border-color: $grey;
                }
            }
            &.serial {
                .step-item {
                    &:before,
                    &:after {
                        border-color: $grey;
                    }
                }
            }
            &.parallel {
                .step-item {
                    &:before,
                    &:after {
                        border-color: $grey;
                    }
                }
            }
        }
        &.success {
            .pre-round {
                background-color: $primaryColor;
                .bk-icon {
                    color: #fff;
                }
            }
            .post-round {
                color: $primaryColor;
                border-color: #aad8ff;
                box-shadow: 0 2px 4px rgba(60, 150, 255, 0.2);
                &:before {
                    background-color: $primaryColor;
                }
            }
        }
        &.running {
            .step-divider {
                .main-divider {
                    border-color: $grey;
                }
            }
            .pre-round {
                background-color: $primaryColor;
            }
            .stage-loading-icon {
                display: block;
                width: 22px;
                height: 22px;
                margin: 1px 0 0 1px;
                animation: loading linear 1s infinite;
            }
        }
        &.warning {
            .step-divider {
                .main-divider {
                    border-color: $grey;
                }
            }
            .pre-round {
                border-color: $warningColor;
                .bk-icon {
                    color: $warningColor;
                    font-weight: bold;
                    font-size: 16px;
                }
            }
        }
        &.error {
            .step-divider {
                .main-divider {
                    border-color: $grey;
                }
            }
            .pre-round {
                border-color: $failColor;
                .bk-icon {
                    color: $failColor;
                    font-weight: bold;
                    font-size: 16px;
                }
            }
        }
    }
    // 执行详情覆盖样式
}

.step-header {
    width: 240px;
    height: 42px;
    margin-left: 26px;
    &__number {
        float: left;
        width: 42px;
        height: 100%;
        line-height: 42px;
        background-color: $primaryColor;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        text-align: center;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
    }
    &__content {
        position: relative;
        float: left;
        width: 198px;
        height: 100%;
        line-height: 42px;
        padding: 0 15px;
        background-color: #33333f;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }
    .title {
        width: 110px;
        font-size: 16px;
        color: #fff;
    }
    .subtitle {
        font-size: 12px;
        color: #a0a4ae;
    }
    .tools {
        position: absolute;
        top: 12px;
        right: 0;
        font-size: 0;
        & > .bk-icon {
            margin-right: 7px;
            padding: 3px;
            font-size: 14px;
            cursor: pointer;
            color: #a0a4ae;
            &:hover {
                color: #fff;
                background-color: #3f3f4b;
            }
        }
        &.step-status {
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}

.step-divider {
    position: relative;
    width: 100%;
    padding: 18px 0;
    &:before {
        content: '';
        position: absolute;
        top: -27px;
        left: 21px;
        display: block;
        width: 7px;
        height: 7px;
        background-color: #fff;
        border: 2px solid $primaryColor;
        border-radius: 50%;
    }
    .pre-round {
        position: absolute;
        top: 50%;
        left: -3px;
        transform: translateY(-50%) scale(.8);
        display: block;
        width: 30px;
        height: 30px;
        background-color: #fff;
        border: 3px solid $primaryColor;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(60, 150, 225, .2);
        z-index: 1;
        &:before,
        &:after {
            content: '';
            position: absolute;
            display: block;
        }
        &:before {
            top: -39px;
            left: 13px;
            width: 10px;
            border-top: 2px solid $primaryColor;
        }
        &:after {
            top: -38px;
            left: 11px;
            height: 35px;
            border-left: 2px solid $primaryColor;
        }
    }
    .post-round {
        position: absolute;
        top: 9px;
        right: 0px;
        width: 18px;
        height: 18px;
        line-height: 14px;
        border: 1px solid #aad8ff;
        text-align: center;
        background-color: #fff;
        color: $primaryColor;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(60, 150, 255, .2);
        z-index: 1;
        font-weight: bold;
        cursor: pointer;
        &.end-round {
            &:before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: $primaryColor;
            }
        }
        &-finish {
            position: absolute;
            right: -60px;
            top: -8px;
            width: 50px;
            height: 32px;
            line-height: 32px;
            border-radius: 2px;
            background-color: $primaryColor;
            text-align: center;
            color: #fff;
            font-size: 14px;
            font-weight: normal;
            &:before {
                content: '';
                position: absolute;
                left: -6px;
                top: 10px;
                border-right: 6px solid $primaryColor;
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
            }
        }
    }
    .main-divider {
        border-top: 2px solid $primaryColor;
    }
    .static-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font: {
            size: 12px;
            weight: bolder;
        }
        color: $primaryColor;
    }
}

.step-item {
    position: relative;
    width: 240px;
    height: 42px;
    margin: 0 0 10px 26px;
    border: 1px solid $grey;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    &.has-error {
        &,
        &:hover {
            border-color: $dangerColor;
            .base-left {
                &,
                .bk-icon {
                    color: $dangerColor;
                }
            }
        }
        &:hover {
            box-shadow: 0 2px 4px rgba(255, 86, 86, 0.2)
        }
    }
    &:hover {
        border-color: $primaryColor;
        color: $primaryColor;
        box-shadow: 0 2px 4px rgba(60, 150, 255, .2);
        .base-left > .bk-icon {
            color: $primaryColor;
        }
    }
    &:not(.create) {
        &:before,
        &:after {
            content: '';
            position: absolute;
            display: block;
        }
    }
    &__wrapper {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        .step-status {
            .bk-icon {
                color: #fff;
            }
        }
    }
    .base-left {
        width: 190px;
        height: 100%;
        padding-top: 11px;
        font-size: 0;
        & > .bk-icon {
            display: inline-block;
            width: 43px;
            height: 100%;
            vertical-align: top;
            text-align: center;
            color: $fontWeightColor;
            font-size: 16px;
        }
    }
    .base-right {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        line-height: 1;
    }
    &.create {
        border-color: $borderWeightColor;
        border-style: dashed;
        background-color: transparent;
        color: $grey;
        .base-left {
            .bk-icon {
                color: $grey;
            }
        }
        &:hover {
            border-color: $primaryColor;
            box-shadow: none;
            color: $primaryColor;
            .base-left {
                .bk-icon {
                    color: $primaryColor;
                }
            }
        }
    }
    &__title {
        position: relative;
        top: -2px;
        width: 143px;
        display: inline-block;
        font-size: 14px;
        .warning-text {
            color: $warningColor;
        }
    }
    .edit-icon {
        &.icon-remove {
            position: relative;
            display: block;
            width: 18px;
            height: 18px;
            border: 1px solid $primaryColor;
            border-radius: 50%;
            &:before,
            &:after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                display: block;
                width: 7px;
                height: 2px;
                background-color: #3c96ff;
            }
            &:before {
                transform: translate(-50%, -50%) rotate(45deg);
            }
            &:after {
                transform: translate(-50%, -50%) rotate(-45deg);
            }
            &:hover {
                background-color: $dangerColor;
                border-color: $dangerColor;
                &:before,
                &:after {
                    background-color: #fff;
                }
            }
        }
    }
    &-checked {
        border-color: $primaryColor;
        color: $primaryColor;
        .base-left .bk-icon {
            color: $primaryColor;
        }
    }
}

.step-mouseover-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    .step-mouseover-main {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 266px;
    }
    .step-mouseover-aside {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 82px;
    }
}
